<template>
  <el-submenu
    :index="menu.f_ModuleId"
    :key="menu.f_ModuleId"
    :popper-class="popperClass"
  >
    <div :class="['el-menu__item-wraper']" slot="title">
      <i
        v-if="lr_theme.showIcon"
        :class="[menu.f_Icon, 'el-menu__icon']"
      ></i>
      <span class="el-menu__text">{{ $t(menu.f_FullName) }}</span>
    </div>
    <template v-for="child in getChildern(menu)">
      <el-menu-item
        :index="child.f_ModuleId"
        :key="child.f_ModuleId"
        @click="open(child)"
        v-if="getChildern(child).length == 0"
      >
        <div class="el-menu__item-wraper">
          <i
            v-if="lr_theme.showIcon"
            :class="[child.f_Icon, 'el-menu__icon']"
          ></i>
          <span class="el-menu__text">{{ $t(child.f_FullName) }}</span>
        </div>
      </el-menu-item>
      <menu-item
        v-else
        :menu="child"
        :key="child.f_ModuleId"
        :popperClass="popperClass"
      />
    </template>
  </el-submenu>
</template>
<script>
import { mapGetters } from "vuex";
export default {
  name: "menu-item",
  data() {
    return {};
  },
  props: {
    menu: {
      type: Object,
    },
    popperClass: {
      type: String,
      default: "learun-more-dark-el-menu",
    },
  },
  created() {},
  mounted() {},
  computed: {
    ...mapGetters(["modulesGroup"]),
  },
  methods: {
    getChildern(item) {
      const _modules = this.modulesGroup[item.f_ModuleId] || [];
      const res = _modules.filter((item) => {
        if (item.f_EnabledMark == 1 && item.f_IsMenu == 1) {
          if (this.loginInfo.f_SecurityLevel == 1) {
            return true;
          } else {
            const moduleAuthIds = this.loginInfo.moduleAuthIds || [];
            if (moduleAuthIds.indexOf(item.f_ModuleId) > -1) {
              return true;
            } else {
              return false;
            }
          }
        }
      });
      return res;
    },
    open(item) {
      this.$router.$lrRouter.goto(item);
    },
  },
};
</script>

